<template>
	<view class="">
		<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll">
			<view class="padding-32">
				<view class="fontSize-26 color-333">
					为训练您的记忆力，点击选中下面中文名，并根据自己的生活经验编写一个故事，需要把以下词汇全部包含在故事中
				</view>
				<view class="flex marginTop-20 items-center" @click="exampleShow = true">
					<image src="../../static/example.png" mode="" style="width: 52rpx;height: 52rpx;"></image>
					<view class="fontSize-24 marginLeft-10 color-51D580">
						编写示例
					</view>
				</view>
				<view class="paddingLeft-24 paddingRight-24 borderRadius-30 paddingBottom-30 marginTop-80"
					style="background-color: #f5f5f5;overflow: hidden;">
					<view class="marginTop-10 color-999 fontSize-26">
						{{page}}区-{{region_num}}幢楼-{{type}}单元-{{familyname}}-门牌号{{big_sort}}-{{small_sort}}
					</view>
					<view class="flex space-between flex-wrap items-center marginTop-8">
						<view
							class="colorBj-fff marginTop-22 borderRadius-20 text-center fontSize-28 padding-10 box-sizing"
							style="width: 30%;height: 96rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
							v-for="(item,index) in wordsList1" :key="index" @click="tabClick(item,index)"
							:class="item.isChecked?'hover':''">
							<view>{{item.xhstr}}</view>
							<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.tran}}
							</view>

						</view>
						<view
							class="colorBj-fff marginTop-22 borderRadius-20 text-center fontSize-28 padding-10 box-sizing"
							style="width: 30%;height: 96rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
							v-for="(item,index) in wordsList2" :key="index" @click="tabClick(item,index)"
							:class="item.isChecked?'hover':''">
							<view>{{item.xhstr}}</view>
							<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.tran}}
							</view>
						</view>
					</view>
				</view>

				<view class="marginTop-30">
					<textarea v-model="storyVal" placeholder="请输入并点击选择上面中文名编写故事" height="120"
						class="textarea"></textarea>
				</view>
				<view class="btn">
					<view class="flex flex-center items-center">
						<image src="../../static/alarm-icon.png" mode="" style="width: 32rpx; height: 32rpx;"></image>
						<view class="marginLeft-12 color-999 fontSize-24">
							训练记忆力，点击选择中文名编故事
						</view>
					</view>
					<view
						class="width-702 height-104 borderRadius-92 colorBj-51D580 color-white text-center marginTop-24"
						style="line-height: 104rpx;" @click='btnClick'>
						保存
					</view>
				</view>

			</view>
		</page-container>
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					别放弃，坚持就是胜利!后面的训练趣味十足。
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel">
						退出
					</view>
					<view class="popup_sure" @click="confirm">
						继续
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="exampleShow" mode='center' bgColor='transparent'>
			<view class="width-574 height-756 borderRadius-44 colorBj-fff padding-24 box-sizing">
				<view class="fontSize-36 color-333 weight-700 text-center">
					编写示例
				</view>
				<image src="https://bbsf.oss-cn-shanghai.aliyuncs.com/english/jiword/example.png" mode="" class="width-526 height-430"
					style="margin: 0 auto; margin-top: 40rpx;"></image>
				<view class="width-526 height-92 borderRadius-92 colorBj-51D580 color-white text-center marginTop-80"
					style="line-height: 92rpx;" @click='exampleShow = false'>
					确定
				</view>
			</view>

		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';

	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const wordsList1 = ref([])
	const wordsList2 = ref([])
	const storyVal = ref('')
	const isShowPage = ref(true)
	const show = ref(false)
	const exampleShow = ref(false)

	const insertRemStoryApi = inject('insertRemStory')
	const region_num = ref(0)
	const type = ref(0)
	const familyname = ref('')
	const pageentr_num = uni.getStorageSync('pageentr_num');
	onLoad((op) => {
		page.value = op.page
		small_sort.value = op.small_sort
		big_sort.value = op.big_sort
		familyname.value = op.familyname
		region_num.value = uni.getStorageSync('region_num')
		type.value = uni.getStorageSync('type')
		console.log(region_num.value, type.value)
		getSmallFamilyWordsApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value,
			type: '1'

		}).then(res => {
			wordsList1.value = res.wordsList1
			wordsList2.value = res.wordsList2
		})
		if (pageentr_num.value == 0) {
			exampleShow.value = true
		}
	})
	const value1 = ref('')
	const english_story = ref('')
	const getSmallFamilyWordsApi = inject('getSmallFamilyWords')
	const allExist = ref(false); // 用于存储是否全部存在的结果  
	const allExist2 = ref(false); // 用于存储是否全部存在的结果  
	const btnClick = () => {
		allExist.value = wordsList1.value.every(char => {
			return storyVal.value.includes(char.xhstr);
		});
		allExist2.value = wordsList2.value.every(char => {
			return storyVal.value.includes(char.xhstr);
		});
		console.log(allExist.value, 138, allExist2.value)
		let remWords = []
		let unremWords = []
		wordsList1.value.forEach((item, index) => {
			if (storyVal.value.includes(item.xhstr)) {
				item.isChecked = false
			} else {
				item.isChecked = true
			}
		})
		wordsList2.value.forEach((item, index) => {
			if (storyVal.value.includes(item.xhstr)) {
				item.isChecked = false
			} else {
				item.isChecked = true
			}
		})
		console.log(wordsList1.value, wordsList2.value)
		if (allExist.value && allExist2.value) {
			insertRemStoryApi({
				page: page.value,
				small_sort: small_sort.value,
				big_sort: big_sort.value,
				chinese_story: storyVal.value

			}).then(res => {
				console.log(res)
				english_story.value = res.english_story
				uni.redirectTo({
					url: '/pagesA/reciteWords/finishStory?english_story=' + english_story.value +
						'&page=' + page.value + '&small_sort=' + small_sort.value + '&big_sort=' +
						big_sort.value
				})
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: "您的单词未全部使用，请检查！"
			})
		}

	}

	const tabClick = (item, index) => {
		storyVal.value = storyVal.value + item.xhstr
	}
	// 离开出现的弹窗
	const beforeleave = (e) => {
		isShowPage.value = false
		show.value = true
	}
	const cancel = () => {
		uni.navigateBack()
	}
	const confirm = () => {
		isShowPage.value = true
		show.value = false
	}
</script>

<style scoped lang="scss">
	.btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.textarea {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
		width: 666rpx;
		height: 220rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #CCCCCC;
		padding: 10rpx;
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;

		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 20rpx;
		}

		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 504rpx;
			height: 100rpx;
			margin: 120rpx auto 0;
		}

		.popup_cancel {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.popup_sure {
			width: 252rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.popup_see {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

	}

	.hover {
		background-color: red;
		color: #FFFFFF;
	}
</style>